import React, { Component } from "react";

import styles from "./index.module.css";

export default class List extends Component {
  render() {
    const { loading, isFirstLoad, err, list } = this.props;
    return (
      <div className={styles.main}>
        {isFirstLoad ? (
          <p className={styles["tip-txt"]}>hello</p>
        ) : loading ? (
          <p className={styles["tip-txt"]}>Loading...</p>
        ) : err ? (
          <p className={`${styles["tip-txt"]} ${styles["err-txt"]}`}>{err}</p>
        ) : list.length === 0 ? (
          <p className={styles["tip-txt"]}>没有查询到该数据~</p>
        ) : (
          <div className={styles.list}>
            {list.map(item => {
              return (
                <a
                  rel="noreferrer"
                  href={item.html_url}
                  className={styles["list-item"]}
                  key={item.id}
                >
                  <img
                    className={styles["list-item_img"]}
                    src={item.avatar_url}
                    alt=""
                  />
                  <span>{item.login}</span>
                </a>
              );
            })}
          </div>
        )}
      </div>
    );
  }
}
